<template>
  <PublicPage pageName="消息" :borderType="true" >
    <view class="qianqp_message">
      <!-- 搜索框 -->
      <SearchInput placeholder="搜索用户名称" @searchFn="searchFn" />
      <!-- 未登录-缺省頁 -->
      <DefaultPage tips="登录获取更多优质内容" :minusHeight="50" configText="去登录" @config="navigateTo({url: '/pagesB/login/index'})" v-if="!isLogin" />
      <!-- 无数据-缺省頁 -->
      <DefaultPage tips="暂无消息~" type="1" :minusHeight="50" v-else-if="!conversationList.length || isEmpty" />
      <!-- 消息列表 减去搜索框高度 50-->
      <ScrollList ref="scrollView" :minusHeight="50" @interrupt="interrupt" @scrolltolower="scrolltolower" v-else>
        <template slot="content">
          <template v-for="(item,index) in conversationList">
            <view
                v-if="_returnUserName(item) && ((item.isShow && keyword) || !keyword)"
                :key="index"
                class="head_list"
                @click="_goMsgDetails(item)"
            >
              <view class="list-image">
                  <image :src="_returnUserImg(item)" mode="aspectFill" />
                  <u-badge type="error" is-center="true" :count="item.unreadMessageCount"></u-badge>
                </view>
              <view class="list-pages">
                  <view class="list-pages-top">
                    <view class="userNameBox"><view class="ov1">{{_returnUserName(item)}}<text class="themeFontColor">@{{_returnCommunityName(item)}}</text></view></view>
                    <view class="timeBox">{{msgToggleTime(item.latestMessage.sentTime)}}</view>
                  </view>
                  <view class="list-pages-bottom">
                    {{item.latestMessage.content.content}}
                  </view>
                </view>
            </view>
          </template>
        </template>
      </ScrollList>
    </view>
  </PublicPage>
</template>
<script>
import PublicPage from "@/components/publicPage/index.vue";
import SearchInput from "@/components/searchInput/index.vue";
import DefaultPage from "@/components/defaultPage/index.vue";
import ScrollList from "@/components/scrollList/index.vue";
import { msgToggleTime } from "@/utils/formTime.js"

export default {
  name: "Message",
  components: {
    PublicPage,
    SearchInput,
    DefaultPage,
    ScrollList
  },

  data() {
    return {
      newDate: new Date(),
      tip: '下拉刷新',
      keyword: '',
      isEmpty: false
    };
  },
  computed: {
    conversationList(){
      console.log(this.$store.state.conversationList, '会话列表');
      return this.$store.state.conversationList
    },
  },
  methods: {
    msgToggleTime,
    // 展示头像
    _returnUserImg(item){
      if(item.latestMessage.messageDirection === 2){ // 消息类型为接收，发送者为好友
        return item.latestMessage.content.sendUserImg
      }else{ // 消息类型为发送，接收者为好友
        return item.latestMessage.content.receiverUserImg
      }
    },
    // 展示名称
    _returnUserName(item){
      if(item.latestMessage.messageDirection === 2){ // 消息类型为接收，发送者为好友
        return item.latestMessage.content.sendUserName
      }else{ // 消息类型为发送，接收者为好友
        return item.latestMessage.content.receiverUserName
      }
    },
    // 社群名称
    _returnCommunityName(item){
      if(item.latestMessage.messageDirection === 2){ // 消息类型为接收，发送者为好友
        return item.latestMessage.content.sendCommunityName || ''
      }else{ // 消息类型为发送，接收者为好友
        return item.latestMessage.content.receiverCommunityName || ''
      }
    },
    // 跳转消息详情
    _goMsgDetails(item){
      if(item.latestMessage.messageDirection === 2){ // 消息类型为接收，发送者为好友
        this.$store.commit('SET_CLICKUSER',{
          userPortrait: item.latestMessage.content.sendUserImg,
          userName: item.latestMessage.content.sendUserName,
          communityName: item.latestMessage.content.sendCommunityName
        })
        this.navigateTo({url: `/pagesB/message/messageDetails?id=${item.latestMessage.senderUserId}`});
      }else{ // 消息类型为发送，接收者为好友
        this.$store.commit('SET_CLICKUSER',{
          userPortrait: item.latestMessage.content.receiverUserImg,
          userName: item.latestMessage.content.receiverUserName,
          communityName: item.latestMessage.content.receiverCommunityName
        })
        this.navigateTo({url: `/pagesB/message/messageDetails?id=${item.latestMessage.targetId}`});
      }
    },
    // 下拉刷新方法，刷新完毕调用组件方法改变状态
    interrupt() {
      setTimeout(() => {
        this.$refs.scrollView.refreshFinish() // 刷新完成
      }, 1000);
    },
    // 底部加载更多
    scrolltolower(e){
      setTimeout(() => {
        this.$refs.scrollView.loadFinish(3) // 加载完成
      }, 1000);
    },
    // 搜索消息
    searchFn(e){
      this.keyword = e.trim()
      if (this.keyword) {
        this.isEmpty = true
        for (let i = 0, length = this.conversationList.length; i < length; i++) {
          const item = this.conversationList[i]
          if (this._returnUserName(item).indexOf(e) !== -1) {
            item.isShow = true
            this.isEmpty = false
          } else {
            item.isShow = false
          }
        }
      } else {
        this.isEmpty = false
      }
    },
  }
};
</script>

<style scoped lang="scss">
.qianqp_message {
  height: 100%;
}
.searchBox{
  background-color: #FFF;
  padding-top: 16rpx;
  padding-bottom: 16rpx;
  .searchBg{
    display: flex;
    align-items: center;
    background-color: #F7F8FA;
    border-radius: 64rpx;
  }
  .search-icon {
    background: url("https://image.qqpyyds.com/mpAppImg/icon/search1_icon.png") 0rpx 0rpx no-repeat;
    width: 48rpx;
    height: 48rpx;
    margin: 0 20rpx;
  }
}

.head_list {
  padding: 20rpx 32rpx;
  display: flex;
  // border-top: 2rpx solid #eee;
  background: #fff;
  position: relative;
  &::before{
    display: block;
    content: ' ';
    position: absolute;
    left: 165rpx;
    bottom: 0;
    height: 1px;
    width: 550rpx;
    background-color: #F2F3F5;
  }
  // 图片
  .list-image {
    width: 100rpx;
    height: 100rpx;
    margin-right: 32rpx;
    position: relative;
    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .list-pages {
    flex: 1;
    .userNameBox{
      flex: 1;
      padding-right: 20rpx;
      color: #323233;
      .ov1{
        @include toe();
        max-width: 400rpx;
      }
    }
    .timeBox{
      font-size: 24rpx;
      color: #969799;
    }
    .list-pages-top {
      display: flex;
      width: 100%;
    }
    .list-pages-bottom {
      width: 554rpx;
      margin-top: 26rpx;
      color: #969799;
      font-size: 24rpx;
      @include toe();
    }
  }
}

// 消息列表结束
</style>
